<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">

            <el-form-item label="场景名称" prop="sceneName">
                <el-input
                        v-model="queryParams.sceneName"
                        placeholder="请输入场景名称"
                        clearable
                        size="small"
                />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="handleQuery">刷新</el-button>
            </el-form-item>

        </el-form>

        <el-row :gutter="20" v-if="this.sceneList.length === 0" v-loading="globalLoading">
            <el-col style="margin-top: 20px">
                <el-empty description="该项目下没有场景"></el-empty>
            </el-col>
        </el-row>

        <el-row :gutter="20" v-if="this.sceneList.length > 0" v-loading="globalLoading">

            <el-col :xs="24" :sm="8" :md="6" :lg="6" :xl="4" style="margin-top: 20px"
                    v-for="(item, index) in this.sceneList"
                    :key="index">

                <el-card class="box-card" v-loading="item.loading">

                    <div slot="header" class="clearfix"
                         style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
            <span style="font-size: 16px; height: 35px; display: inline-block; line-height: 35px">{{
                    item.sceneName
                }}</span>
                    </div>

                    <el-form>

                        <el-form-item label="开关状态">

                            <el-tag v-if="item.sceneSwitch === '0'" type="danger">关</el-tag>

                            <el-tag v-if="item.sceneSwitch === '1'" type="success">开</el-tag>

                        </el-form-item>

                        <el-form-item label="运行状态">
                            <span v-if="item.sceneStatus ==='0'">已关闭</span>
                            <span v-if="item.sceneStatus ==='1'">待运行</span>
                            <span v-if="item.sceneStatus ==='2'">运行中</span>
                            <span v-if="item.sceneStatus ==='3'">已完成</span>
                        </el-form-item>

                        <el-form-item label="操作">
                            <el-switch
                                    v-model="item.sceneSwitch"
                                    active-value="1"
                                    inactive-value="0"
                                    @change="handleSceneSwitchChange(item)"
                            ></el-switch>
                            <!--              <el-button type="success" @click="operationScene(index, '1')">开启</el-button>-->
                            <!--              <el-button type="danger" @click="operationScene(index, '0')">关闭</el-button>-->
                            <!--              <el-switch-->
                            <!--                v-model="item.switchValue"-->
                            <!--                active-color="#13ce66"-->
                            <!--                active-value="1"-->
                            <!--                inactive-value="0"-->
                            <!--                active-text="开启"-->
                            <!--                inactive-text="关闭"-->
                            <!--                @change="handleLoopStatusChange(index, item.switchValue)">-->
                            <!--              </el-switch>-->
                        </el-form-item>

                    </el-form>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { changeSceneSwitch, listScene } from '@/api/business/scene'
import gatewaySelect from '../../common/GatewaySelect.vue'
import { mapGetters } from 'vuex'

const common = require('@/api/common/common')

export default {
    inject: ['reload'],
    name: 'Loop',
    components: {
        gatewaySelect
    },
    computed: {
        ...mapGetters([
            'projectId'
        ])
    },
    data() {
        return {
            queryParams: {
                projectId: null,
                gatewayNumber: null
            },

            showSearch: true,

            sceneList: [],

            globalLoading: false
        }
    },
    created() {
        this.getList()
    },
    methods: {

        handleQuery() {
            this.getList()
        },

        getList() {
            this.globalLoading = true

            this.queryParams.projectId = this.projectId
            listScene(this.queryParams).then(response => {

                this.sceneList = []

                response.data.forEach(item => {
                    item.loading = false
                    this.sceneList.push(item)
                })

                this.globalLoading = false
            }, error => {
                this.globalLoading = false
            })
        },

        handleSceneSwitchChange(item) {

            let text = item.sceneSwitch === '0' ? '关闭' : '开启'

            changeSceneSwitch(item.sceneId, item.sceneSwitch).then(response => {
                this.getList()

                this.$modal.msgSuccess(text + '成功')
            }, error => {

                item.sceneSwitch = item.sceneSwitch === '0' ? '1' : '0'

            })

        },

        operationScene(index, sceneSwitch) {
            let scene = this.sceneList[index]
            let text = sceneSwitch === '0' ? '关闭' : '开启'
            this.$modal.confirm('确认要' + text + '"' + scene.sceneName + '"场景吗？').then(function () {

                // this.sceneList[index].loading = true

                return changeSceneSwitch(scene.sceneId, sceneSwitch)
            }).then(() => {
                this.getList()
                this.$modal.msgSuccess(text + '成功')
            }).catch(function () {
            })

        }

    }
}
</script>

<style scoped>
.el-switch__core {
    height: 50px;
}
</style>
